り り ち ゃ ん と ホ ー ム ペ ー ジ を 作 ろ う ！

フレームの達人になろう！

今月号で紹介したホームページ作成用ソフト「楽タグ」は、オンラインソフトNAVIからインストールできます。

この「楽タグ」を使って、今回はフレーム作成にチャレンジしてみました。
でも、「ＨＴＭＬタグは初めて！」という人にはちょっと難しい印象があったかもしれません。
ＨＴＭＬタグはよくわかんないけど、自分のホームページをフレームを使ってカッコよくしたい！　そんなあなたはぜひこのページを読んでスキルアップしてください。基礎からしっかりマスターできてしまうから、すぐにフレームの達人になれます。

本誌でも紹介してありますが、「楽タグ」を使えば、フレーム作成に必要な操作はわずか以下の3ステップだけ。

1.［タグパレット］ボタンをクリック！

2.［フレーム系］ボタンをクリック！

3.［画面を横に分割］ボタンをクリック！

これで、以下の白い文字の部分を「楽タグ」が自動的に挿入してくれるので、あとは緑色の文字の部分を任意に指定するだけ。これがキホンです。SRC="  "には、そのフレームに表示させたいページ（ＨＴＭＬファイルの名前）を指定します。NAME="  "にはその「フレームの名前」をそれぞれ付けます。


<FRAMESET ROWS=30%,70%>
<FRAME NAME="head" SRC="riritop.html">
<FRAME NAME="main" SRC="riri01.html">
</FRAMESET>

こんなカンジで表示されます。

ここまでのやり方は本誌でも紹介しています。
では、フレームを縦に分割してみたい場合のやり方を覚えましょう。

1.［タグパレット］ボタンをクリック！

2.［フレーム系］ボタンをクリック！

3.［画面を縦に分割］ボタンをクリック！

操作は［画面を縦に分割］ボタンをクリックする以外は同じです。
緑色の文字の部分は上とまったく同じで指定してみました。


<FRAMESET COLS=30%,70%>
<FRAME NAME="head" SRC="riritop.html">
<FRAME NAME="main" SRC="riri01.html">
</FRAMESET>

ちゃんとこんなカンジでフレームが縦に分割されて表示されたはずです。

つまり、次の表のように、フレームを縦に分割するか横に分割するかでＨＴＭＬタグが違うことがわかります。

［画面を横に分割］ボタンFRAMESET ROWS=
［画面を縦に分割］ボタンFRAMESET COLS=

これでフレーム作成のキホンがわかったと思うので、さてクイズです。次のようなフレームを作りたいときはどうすればよいのでしょうか？

答えは、次のとおりです。
まず、FRAMESET  ROWSでフレームを横に分割（上下に分割）してから、下側のフレームをFRAMESET  COLSでさらに縦に分割（左右に分割）するわけです。


<FRAMESET ROWS=30%,70%>
<FRAME NAME="head" SRC="riritop.html">
<FRAMESET COLS=30%,70%>
<FRAME NAME="green" SRC="green.html">
<FRAME NAME="main" SRC="riri01.html">
</FRAMESET>
</FRAMESET>

なお、<FRAMESET>というＨＴＭＬタグを2つ使ったので、</FRAMESET>も2つ必要になります。

注意  ＨＴＭＬタグのキホンは、<FRAMESET>～</FRAMESET>のように対応させて使わなければなりません。

では、次のようなフレームを作りたいときはどうすればよいのでしょうか？

わかりましたか？　答えは、次のとおりです。
まずFRAMESET  ROWSでフレームを横に分割（上下に分割）してから、次に上側のフレームをFRAMESET  COLSでさらに縦に分割（左右に分割）して、その後で下側のフレームを指定するという順番になります。


<FRAMESET ROWS=70%,30%>
  <FRAMESET COLS=30%,70%>
  <FRAME NAME="green" SRC="green.html">
  <FRAME NAME="main" SRC="riri01.html">
  </FRAMESET>
<FRAME NAME="head" SRC="riritop.html">
</FRAMESET>

なお、<FRAMESET>というＨＴＭＬタグの位置に注目してください。
見やすいように字下げしてみたのですぐにわかると思いますが、<FRAMESET  COLS>～</FRAMESET>のブロックが<FRAMESET  ROWS>～</FRAMESET>の入れ子になっているのです。

では、FRAMESET  ROWSとFRAMESET  ROWSの順番を次のように入れ替えてみると、一体どうなるでしょうか？


<FRAMESET COLS=30%,70%>
  <FRAMESET ROWS=70%,30%>
  <FRAME NAME="head" SRC="riritop.html">
  <FRAME NAME="green" SRC="green.html">
  </FRAMESET>
<FRAME NAME="main" SRC="riri01.html">
</FRAMESET>

こんなカンジになります。左側のフレームだけが横に分割（上下に分割）されます。

このように、フレームでは<FRAMESET>で分割した順番が一番重要なことで、</FRAMESET>の位置がその区切りとなります。
これを知っていれば、次のような4分割のフレームだって簡単に作れてしまうのです。

じつは4分割のフレームを作る方法には2通りあり、ひとつめの方法は次のとおりです。

最初に<FRAMESET  COLS>で縦に分割（左右に分割）しておいてから、<FRAMESET  ROWS>で、左側のフレーム→右側のフレームという順番にそれぞれ横に分割（上下に分割）するわけです。


<FRAMESET COLS=30%,70%>

  <FRAMESET ROWS=70%,30%>
  <FRAME NAME="head" SRC="riritop.html">
  <FRAME NAME="green" SRC="green.html">
  </FRAMESET>

  <FRAMESET COLS=70%,30%>
  <FRAME NAME="main" SRC="riri01.html">
  <FRAME NAME="yellow" SRC="yellow.html">

</FRAMESET>

もうひとつの方法は、次のとおりです。

最初に<FRAMESET  ROWS>で横に分割（上下に分割）しておいてから、<FRAMESET  ROWS>で、上側のフレーム→下側のフレームという順番にそれぞれ縦に分割（左右に分割）するわけです。


<FRAMESET ROWS=70%,30%>

  <FRAMESET COLS=30%,70%>
  <FRAME NAME="head" SRC="riritop.html">
  <FRAME NAME="main" SRC="riri01.html">
  </FRAMESET>

  <FRAMESET ROWS=30%,70%>
  <FRAME NAME="green" SRC="green.html">
  <FRAME NAME="yellow" SRC="yellow.html">

</FRAMESET>

一見難しそうなフレームも、組み合わせパズルみたいなたったこれだけのこと。

あとは、どちらの場合も、フレームに表示させたいＨＴＭＬファイルの指定さえ間違わなければ、いろいろ試しながらフレーム分割比率を調整するだけ。

ただし、真っ白なページが表示されてしまい、フレームがまったく表示されないなんて“うっかりミス”もじつは多いから気を付けましょう。
つまり、次のように<FRAMESET>～</FRAMESET>が、</HEAD>と<BODY>の間に挟まれた位置に入力していなければ、フレームは表示されないわけです。


</HEAD>

<FRAMESET COLS=30%,70%>
<FRAME NAME="head" SRC="riritop.html">
<FRAME NAME="main" SRC="riri01.html">
</FRAMESET>

<BODY>

ちゃんとフレームが分割できるようになったら、あとは、そのフレーム内に、思ったとおりのページをジャンプ先として表示できるようになれば、あなたはもうフレームの達人といってよいでしょう。
あるフレーム内のリンクをクリックすると、別のフレームにそのジャンプ先が表示されるという、まさにフレームを使ってみたくなる仕組みの「アレ」のことです。

ちなみに本誌でも紹介していますが、リンク用のＨＴＭＬタグは<A  HREF>～</A>で、フレームで使うときは、次のように指定します。


<A HREF="room.html"　TARGET="main">

ＨＴＭＬタグ<A  HREF>の中にTARGET="  "を追加して、そこにジャンプ先のページを表示させたい「フレームの名前」を指定します。
フレームの名前とは、<FRAME NAME="  ">で付けたもののこと。ここでは、例えばmainを指定しています。

これだけ覚えておけば、今日からあなたもフレームの達人ですから、頑張ってチャレンジしてみましょう。